import { Fragment } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import {
  BookOpen,
  FileText,
  GraduationCap,
  Briefcase,
  User,
  Calendar,
  Award,
} from "lucide-react";
import { Resume } from "@/lib/schemas/resume-form";

export const Template01 = ({ resume }: { resume: Resume }) => {
  return (
    <div
      className="min-h-screen bg-white p-6 font-sans w-[800px] mx-auto"
      style={
        {
          "--primary": resume.primary,
          "--secondary": resume.secondary,
        } as React.CSSProperties
      }
    >
      {/* Header Section */}
      <div className="mb-8">
        <div className="flex items-center justify-between bg-gradient-to-r from-primary/10 to-secondary/10 p-6 rounded-lg border-l-4 border-primary">
          <div className="flex items-center space-x-6">
            <div className="text-4xl font-bold text-primary">
              {resume.title}
            </div>
            <Separator orientation="vertical" className="h-12 bg-primary" />
            <div className="flex flex-col space-y-1">
              <div className="text-sm text-primary/80 font-medium">
                细心从每一个细节开始
              </div>
              <div className="text-lg text-primary font-semibold">
                Personal Resume
              </div>
            </div>
          </div>
          <div className="flex space-x-3">
            <div className="w-10 h-10 bg-secondary rounded-full flex items-center justify-center text-white">
              <BookOpen className="w-5 h-5" />
            </div>
            <div className="w-10 h-10 bg-secondary rounded-full flex items-center justify-center text-white">
              <FileText className="w-5 h-5" />
            </div>
          </div>
        </div>

        {/* Decorative Line */}
        <div className="mt-4 h-2 bg-gradient-to-r from-primary via-primary/80 to-secondary rounded-full " />
      </div>

      {/* Basic Info Section */}
      <Card className="mb-8 border-l-4 border-l-primary">
        <CardHeader className="pb-4">
          <CardTitle className="text-xl text-primary font-semibold flex items-center">
            <User className="w-5 h-5 mr-2" />
            {resume.basicInfo.title}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-3">
              {resume.basicInfo.data.slice(0, 3).map((item, index) => (
                <div
                  key={index}
                  className="flex items-center space-x-3 text-sm"
                >
                  <div className="w-2 h-2 bg-primary rounded-full flex-shrink-0" />
                  <span className="text-gray-600 font-medium">
                    {item.label}：
                  </span>
                  <span className="text-gray-800">{item.val}</span>
                </div>
              ))}
            </div>
            <div className="space-y-3">
              {resume.basicInfo.data.slice(3, 6).map((item, index) => (
                <div
                  key={index}
                  className="flex items-center space-x-3 text-sm"
                >
                  <div className="w-2 h-2 bg-primary rounded-full flex-shrink-0" />
                  <span className="text-gray-600 font-medium">
                    {item.label}：
                  </span>
                  <span className="text-gray-800">{item.val}</span>
                </div>
              ))}
            </div>
            <div className="flex justify-center items-start">
              <div className="w-32 h-32 rounded-lg overflow-hidden border-2 border-primary/20">
                <img
                  src={resume.avatar}
                  alt="Avatar"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Education Section */}
      <Card className="mb-8 border-l-4 border-l-primary">
        <CardHeader className="pb-4">
          <CardTitle className="text-xl text-primary font-semibold flex items-center">
            <GraduationCap className="w-5 h-5 mr-2" />
            {resume.education.title}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {resume.education.data.map((item, index) => (
            <div key={index} className="space-y-3">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between space-y-2 md:space-y-0">
                <div className="flex items-center space-x-3">
                  <Badge variant="secondary" className="text-xs">
                    <Calendar className="w-3 h-3 mr-1" />
                    {item.time}
                  </Badge>
                </div>
                <div className="text-center">
                  <h3 className="font-semibold text-lg text-gray-900">
                    {item.school}
                  </h3>
                  <p className="text-sm text-gray-600">{item.program}</p>
                </div>
                <div className="text-right">
                  <Badge variant="outline" className="text-xs">
                    <Award className="w-3 h-3 mr-1" />
                    学历
                  </Badge>
                </div>
              </div>
              <div className="space-y-2">
                {item.content.map((content, contentIndex) => (
                  <div
                    key={contentIndex}
                    className="flex items-start space-x-2 text-sm text-gray-700"
                  >
                    <div className="w-1.5 h-1.5 bg-secondary rounded-full mt-2 flex-shrink-0" />
                    <span>{content}</span>
                  </div>
                ))}
              </div>
              {index < resume.education.data.length - 1 && (
                <Separator className="my-4" />
              )}
            </div>
          ))}
        </CardContent>
      </Card>

      {/* Experience Section */}
      <Card className="mb-8 border-l-4 border-l-primary">
        <CardHeader className="pb-4">
          <CardTitle className="text-xl text-primary font-semibold flex items-center">
            <Briefcase className="w-5 h-5 mr-2" />
            {resume.experience.title}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {resume.experience.data.map((item, index) => (
            <div key={index} className="space-y-3">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between space-y-2 md:space-y-0">
                <div className="flex items-center space-x-3">
                  <Badge variant="secondary" className="text-xs">
                    <Calendar className="w-3 h-3 mr-1" />
                    {item.time}
                  </Badge>
                </div>
                <div className="text-center">
                  <h3 className="font-semibold text-lg text-gray-900">
                    {item.company}
                  </h3>
                  <p className="text-sm text-gray-600">{item.role}</p>
                </div>
                <div className="text-right">
                  <Badge variant="outline" className="text-xs">
                    <Briefcase className="w-3 h-3 mr-1" />
                    工作
                  </Badge>
                </div>
              </div>
              <div className="space-y-2">
                {item.content?.map((content, contentIndex) => (
                  <div
                    key={contentIndex}
                    className="flex items-start space-x-2 text-sm text-gray-700"
                  >
                    <div className="w-1.5 h-1.5 bg-secondary rounded-full mt-2 flex-shrink-0" />
                    <span>{content}</span>
                  </div>
                ))}
              </div>
              {index < resume.experience.data.length - 1 && (
                <Separator className="my-4" />
              )}
            </div>
          ))}
        </CardContent>
      </Card>

      {/* External Sections */}
      {resume.externals.map((item, index) => (
        <Fragment key={index}>
          {item.title && (
            <Card className="mb-8 border-l-4 border-l-primary">
              <CardHeader className="pb-4">
                <CardTitle className="text-xl text-primary font-semibold">
                  {item.title}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {item.content.map((content, contentIndex) => (
                    <div
                      key={contentIndex}
                      className="flex items-start space-x-2 text-sm text-gray-700 leading-relaxed"
                    >
                      <div className="w-1.5 h-1.5 bg-secondary rounded-full mt-2 flex-shrink-0" />
                      <span>{content}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </Fragment>
      ))}
    </div>
  );
};
